<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>单号查询</title>

    <script src="${ctx}/static/js/jquery.min.js"></script>
    <link rel="stylesheet" href="${ctx}/static/css/bootstrap.min.css">

    <%--<link rel="stylesheet" href="${ctx}/static/jquery/jquery-treetable/stylesheets/jquery.treetable.theme.default.css">--%>
    <style>
        body {
            height: 550px;
            padding-top: 105px;
        }

        .panel {
            margin-bottom: 0px;
        }

        .navbar-container {
            padding-right: 0px;
            padding-left: 0px;
        }
    </style>
</head>
<body>


<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container navbar-container">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">单号查询</h3>
            </div>
            <div class="panel-body">
                <div class="input-group">
                    <input type="text" name="keyWord" id="key_word" class="form-control" placeholder="输入用户名"
                           onkeypress="if(event.keyCode==13) {ss.click();return false;}">
                    <span class="input-group-btn icon-search">
                        <button class="btn btn-default" type="button" onclick="searchLike()" id="ss">搜索</button>
                    </span>
                </div>
            </div>
        </div>
    </div>
</nav>
<div class="container" id="result-panel">
    <div class="panel ">
        <div class="panel-heading">
            <font color="#a9a9a9">查询结果列表</font>
        </div>
        <div class="panel-body" id="result">

        </div>
    </div>
</div>

<script>
    // 对Date的扩展，将 Date 转化为指定格式的String
    // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
    // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
    // 例子：
    // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
    // (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
    Date.prototype.Format = function (fmt) { //author: meizz
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }
    //调用： var time1 = new Date().Format("yyyy-MM-dd");var time2 = new Date().Format("yyyy-MM-dd HH:mm:ss");
    function isEmpty(msg) {
        return $.trim(msg) == "";
    }
    function reloadData(data) {
        $("#result").empty();//清空所有的元素
        if (!isEmpty(data)) {
            $.each(data, function (i, value) {
                var userName = value.userName;
                var postCompany = value.postCompany;
                var postNo = value.postNo;
                var orderTime = value.orderTime;
                var productName = value.productName;
                $panel = $("<div></div>");
                $name = $("<strong>姓名 : </strong>" + userName + "<br/>");
                $postCompany = $("<strong>快递公司 : </strong>" + postCompany + "<br/><strong>单号 : </strong>");
                $postNo = $("<a>" + postNo + "</a>");
                $orderTime = $("<br/><strong>时间 : </strong>"
                        + new Date(orderTime).Format("yyyy-MM-dd hh:mm:ss")
                        + "<br/>"
                )
                ;
                $productName = $("<strong>产品 : </strong>" + productName + "<br/>");


                $panel.append($name);
                $panel.append($postCompany);
                $panel.append($postNo);
                $panel.append($orderTime);
                $panel.append($productName);
                $("#result").append($panel);
                $("#result").append("<hr/>");
            });
        } else {
            $("#result").append("没有搜索到，换个关键词试试!");
        }
    }
    function searchLike() {

        var vals = $("#key_word").val();
        if (isEmpty(vals)) {
            defaultAlert("请输入搜索词");
            return false;
        }
        $.ajax({
            url: ${ctx}'/order/search.do',// 跳转到 action
            data: {
                keyWords: vals
            },
            type: 'post',
            cache: false,
            dataType: 'json',
            success: function (data) {
                if (data.msg == "true") {
                    reloadData(data.data);

//                    view(data.msg);
// view("修改成功！");
//                    alert("修改成功！");

//                    window.location.reload();
                } else {
                    $("#result").append("服务器开小差了.....");

//                    view(data.msg);
                    alert(" ");
                }
            },
            error: function () {
// view("异常！");
                alert("异常！");
            }
        });
    }
</script>
</body>
</html>